<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/ui-lightness/jquery-ui-1.8.20.custom.css" />
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
        <script src ="js/jquery-ui-1.8.20.custom.min.js" type="text/javascript"></script>
   
    <script type="text/javascript">
        $(function() {
            $( "#tabs" ).tabs();
            
            $('#loadingImg').hide();
            
            //getFilteredResults();
	});
        
        function generatePaperPortlet (paper) {
            var html;
          
            html = '<li><a href="' + buildLink(paper.id) + '" target="_blank">' +  paper.title +  '</a></li>';
            //html += '<li>' + buildLink(paper.id) + '</li></ul></div>';
            return html;
        } 
        
        function buildLink (id) {
            return 'http://academic.research.microsoft.com/Publication/' + id;
        }
        
        function buildList (list, tabID) {
            var html = '<div><ul>';
            for (var i=0; i<list.length; i++) {
                html+= generatePaperPortlet(list[i]);
            
            }
            
            
           
            html += '</ul></div>';
            $('#' + tabID).append(html);
        }
        
        function getFilteredResults () {
             $('#loadingImg').show();
             $.get('filterPapers.php', {authorID: $('#name').val()}, function(data) {
                var dataArray = $.parseJSON(data);
                buildList (dataArray.valid, 'valid');
                buildList(dataArray.invalid, 'invalid');
                buildList(dataArray.notInRepos, 'notInRepos');
                $('#loadingImg').hide();    
             });
             
        }
        
    </script>
    
     </head>
     <body>
        <div id="searchDiv"  style="clear: both">
         
            <input id="name" type="text" size="40" maxlength="40" style="float: left; margin-left: 10px; margin-right: 10px;" />
       
            <input id="searchCrit" type="text" size="40" maxlength="40" style="float: left; margin-left: 10px; margin-right: 10px;"/>
                       
            <button type="button" style="float: left; margin-left: 10px; margin-right: 10px;" onclick="getFilteredResults()">Go</button>
                    
        </div>
        <div id="tabs" style="clear: both">
	<ul>
		<li><a href="#valid">Valid</a></li>
		<li><a href="#invalid">Invalid</a></li>
		<li><a href="#notInRepos">Not In IEEE</a></li>
	</ul>
	<div id="valid">
		
	</div>
	<div id="invalid">

	</div>
	<div id="notInRepos">

	</div>
        </div>
        <div id="imageDiv"  style="margin-left: auto; margin-right: auto; width: 100%">
            <img id="loadingImg" src="loading.gif"/>    
        </div> 
     </body>
</html>